<template>
  <div id="main" style="width: 400px; height: 400px"></div>
</template>
<script lang="ts">
  import { defineComponent, onMounted } from 'vue'
  import * as echarts from 'echarts'
  export default defineComponent({
    // eslint-disable-next-line vue/multi-word-component-names
    name: 'Echarts',
    setup() {
      onMounted(() => {
        echartInit()
      })
      const echartInit = () => {
        let dom: any = document.getElementById('main')
        let myChart = echarts.init(dom)
        // 指定图表的配置项和数据
        let option = {
          title: {
            text: '数据统计'
          },
          tooltip: {},
          legend: {
            data: ['销量']
          },
          xAxis: {
            data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
          },
          yAxis: {},
          series: [
            {
              name: '销量',
              type: 'bar',
              barWidth: 10,
              data: [5, 20, 36, 10, 10, 20]
            }
          ]
        }
        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option)
        return { echartInit }
      }
    }
  })
</script>
<style lang="scss" scoped></style>
